<style rel="stylesheet/scss" lang="scss" scoped>
  .headerBox {
      width: 100%;
      height: 60px;
      background-color: white;
      text-align: center;
      position:relative;
    .imgBox {
      position:absolute;
      left:7%;
      top: 10px;
      /*margin-left:120px;*/
      height: 48px;
      width: 200px;
    }
  }
  .footerBox {
    position:fixed;
    left:0;
    bottom:0;
    width: 100%;
    height: 50px;
    background-color: white;
    z-index: 999;
    text-align: center;
    .foot-text {
      width:380px;
      height:20px;
      margin: 16px auto;
      color:rgba(171,185,203,1);
      font-size:14px;
      font-family:PingFangSC-Light;
    }
  }
  .login-form3 {
    margin: 0 auto;
    /*border:1px solid deeppink;*/
    /*position: absolute;*/
    width:580px; /*form宽度*/
    /*max-width: 100%;*/
    padding: 2px 35px 15px 35px;
    background-color: white;
  }
  .fontRed{
    color:red;
    font-size:20px;
  }
</style>
<template>
  <div :style="{height: loginHeight}" style="background-color: #F9FAFC">
    <div class="headerBox">
      <div class="imgBox">
        <img src="/static/images/zhiXiangLogo.png">
      </div>
    </div>
    <div class="contentBox">
      <div class="register-box-content" style="background-color: #FFF;margin:30px 200px;">
        <Portlet title="物流资质认证" style="position:relative;">
          <el-row>
            <el-form ref="registerForm" :model="registerForm" class="login-form3" auto-complete="on" label-position="right" label-width="150px">
              <!--<el-col :span="6">-->
                <div class="title-container">
                  <p style="min-width: 560px;">
                    <el-steps :active="activeRegStep" :finish-status="success" align-center style="font-size:12px;margin: 15px auto;">
                      <el-step title="账号信息"></el-step>
                      <el-step title="资质认证"></el-step>
                      <el-step :title="activeRegStep == 4 ? '注册失败' : '注册成功'"></el-step> <!--:class="{'fontRed': activeRegStep === 4}"-->
                    </el-steps>
                  </p>
                </div>
              <!--</el-col>-->
              <el-col :span="24">
                <el-row :gutter="5">
                  <div v-show="activeRegStep == 1">
                    <el-col :span="24" style="margin-top:55px;">
                      <el-form-item prop="registerPhone" label="手机号"
                                    :rules="[
                        {required: true, message: '请输入手机号码', trigger: 'blur'},
                        { validator: isPhone, message: '手机号格式有误', trigger: 'blur' }
                      ]">
                        <el-input
                          ref="mark"
                          clearable
                          v-model="registerForm.registerPhone"
                          placeholder="请输入手机号"
                          name="username"
                          type="text"
                          auto-complete="off"
                        >
                          <i class="iconfont icon-ren" slot="prefix" style="font-size:12px;"></i>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24" style="margin: 15px auto;">
                      <el-form-item prop="registerCode" label="短信验证:"
                                    :rules="[
                          {required: true, message: '验证码必须', trigger: 'blur'}
                             ]">
                        <el-input v-model="registerForm.registerCode" placeholder="请输入6位短信验证码">
                          <i class="iconfont icon-yanzhengma2" slot="prefix" style="font-size:14px;position:relative;top:12px;"></i>
                          <template slot="append">
                            <el-button @click.prevent="getRegisterCode" :loading="codeLoading" :disabled="times3 > 0"><span>{{ verificationCodeText3 }}</span></el-button>
                          </template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item prop="pwd" label="密码:"
                                    :rules="[
                      {required: true, message: '密码必须且6到12位', trigger: 'blur', min: 6, max: 12}
                    ]">
                        <el-input type="password" clearable v-model="registerForm.pwd" placeholder="请输入密码" auto-complete="off" @keyup.enter.native="registerLogin">
                          <i class="iconfont icon-mimasuo" slot="prefix" style="font-size:12px;"></i>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24" style="margin-top:15px;margin-bottom:40px;">
                      <el-form-item prop="registerPwdTwo"  label="确认密码:"
                                    :rules="[
                        {required: true, message: '再次确认必须', trigger: 'blur'},
                        {validator: isSame, otherValue: registerForm.pwd, message: '两次密码不一致,请重新输入', trigger: 'blur'}
                      ]">
                        <el-input type="password" v-model="registerForm.registerPwdTwo" placeholder="确认密码" auto-complete="off" @keyup.enter.native="submitFindPsw">
                          <i class="iconfont icon-mimasuo" slot="prefix" style="font-size:12px;"></i>
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </div>
                  <div v-if="activeRegStep == 2">
                    <el-col :span="24">
                      <el-form-item prop="companyName" label="公司名称:"
                                    :rules="[
                        {required: true, message: '公司名称必须', trigger: 'blur'},
                        {validator: isChinese, message: '只能输入中文', trigger: 'blur'}
                      ]">
                        <el-input type="text" v-model="registerForm.companyName" placeholder="公司营业执照名称">
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24" >
                      <el-form-item prop="communityCode" label="统一社会信用代码:"
                                    :rules="[
                        {required: true, message: '信用代码必须', trigger: 'blur'},
                        {validator: isEnglishOrNumber, message: '只能输入英文字母或数字', trigger: 'blur'},
                        {message: '输入长度不得低于15位数字或字母', trigger: 'blur', min: 15}
                      ]">
                        <el-input type="text" v-model="registerForm.communityCode" placeholder="统一社会信用代码">
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item prop="legalPerson" label="法定代表人:"
                                    :rules="[
                        {required: true, message: '法人姓名必须', trigger: 'blur'},
                        {validator: isChinese, message: '只能输入中文', trigger: 'blur'}
                      ]">
                        <el-input type="text" v-model="registerForm.legalPerson" placeholder="法定代表人">
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24" style="">
                      <el-form-item prop="serviceHotline" label="公司服务热线:"
                                    :rules="[
                        {validator: isInteger, message: '请输入数字！', trigger: 'blur'},
                        {required: true, message: '对外服务热线必填(8~11位数字)', trigger: 'blur', min: 8, max: 11}
                      ]">
                        <el-input type="text" v-model="registerForm.serviceHotline" placeholder="该电话将出现在打印单据上">
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24" style="">
                      <el-form-item prop="DAddress" label="公司住所:" :rules="[
                    {required: true, message: '公司住所必须', type:'array', trigger: 'change'}
                  ]">
                        <cascade-address :level="3" v-model="registerForm.DAddress" placeholder="公司住所(省市区)" style="width: 100%"></cascade-address>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24" style="">
                      <el-form-item prop="detailAddress"
                                    :rules="[
                        {required: true, message: '详细地址必须', trigger: 'blur'}
                      ]">
                        <el-input type="text" v-model="registerForm.detailAddress" placeholder="详细地址">
                          <!--天府二街138号1期3栋508-->
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24" style="">
                      <el-form-item prop="contactsName" label="公司联系人:"
                                    :rules="[
                        {required: true, message: '联系人姓名必须', trigger: 'blur'}
                      ]">
                        <el-input type="text" v-model="registerForm.contactsName" placeholder="业务联系人姓名">
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24" style="">
                      <el-form-item prop="contactsPhone" label="联系人电话:"
                                    :rules="[
                        {required: true, message: '联系电话', trigger: 'blur'},
                        {validator: isPhone, message: '手机号格式不正确', trigger: 'blur'},
                      ]">
                        <el-input type="text" v-model="registerForm.contactsPhone" placeholder="联系人电话(手机号码)">
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item   prop="businessLicense" label="营业执照:"
                                      :rules="[
                         {required: true, message: '营业执照必须', trigger: 'change', type: 'array'}
                      ]">
                        <!--<uploadImage v-model="model.businessLicense" :formData="{group: '1'}" :max="1" :singleMaxSize="524288"></uploadImage>-->
                        <UploadImage v-model="registerForm.businessLicense" :max="1" :formData="{group: '1'}"></UploadImage>
                      </el-form-item>
                      <!--<span style="font-size:12px;color:gray;position:absolute;bottom:16px;left:26%;">《营业执照》</span>-->
                    </el-col>
                    <el-col :span="24">
                      <el-form-item   prop="carriageTestify" label="道路运输许可证:"
                                      :rules="[
                         {required: true, message: '道路运输许可证必须', trigger: 'change', type: 'array'}
                      ]">
                        <!--<uploadImage v-model="model.carriageTestify" :formData="{group: '1'}" :max="1" :singleMaxSize="524288"></uploadImage>-->
                        <UploadImage v-model="registerForm.carriageTestify" :max="1" :formData="{group: '2'}"></UploadImage>
                      </el-form-item>
                      <!--<span style="font-size:12px;color:grey;position:absolute;bottom:16px;left:26%;">《道路运输许可证》</span>-->
                    </el-col>
                    <el-col :span="24">
                      <el-form-item style="border:none;">
                        <el-checkbox v-model="registerForm.isAgree" :class="{'is-checked': registerForm.isAgree}" >我已阅读并同意 <span style="color:#FF8800;font-size:13px;">《用户服务协议》</span></el-checkbox>
                      </el-form-item>
                    </el-col>

                  </div>
                  <div v-show="activeRegStep == 3">
                    <div  style="margin-top:50px; margin-bottom:50px;">
                        <p style="text-align:center"><i class="el-icon-success m--font-success" style="font-size: 80px;color:#57D092"></i></p>
                        <p style="margin-top:45px; margin-left:35px;text-align:center">注册成功，我们将在2~3个工作日内完成物流商资质审核，</p>
                        <p style="margin-top:5px;margin-left:35px;text-align:center">审核结果将通过短信发送至申请账号手机，请注意查收！</p>
                    </div>
                  </div>
                  <div v-show="activeRegStep == 4" style="margin:40px auto;">
                    <el-col :span="22" :offset="2" style="text-align: center;">
                      <p style="margin:40px auto;"><i class="el-icon-error m--font-error" style="font-size: 80px;color:#57D092"></i></p>
                      <p>注册失败</p>
                      <el-button class="btn-block btn-lg" type="primary" style="width:100%" @click.native.prevent="goLogin">
                        返回
                      </el-button>
                    </el-col>
                  </div>
                  <el-col :span="22" :offset="2" v-show="activeRegStep != 4">
                    <el-button class="btn-block btn-lg" :loading="loadingRegister" type="primary" style="width:100%" @click.native.prevent="registerSubmit">
                      {{registerBtnText}}
                    </el-button>
                  </el-col>

                  <!--<el-col :span="18" :offset="4" style="margin-top:10px;" v-show="activeRegStep == 1">-->
                    <!--<p style="text-align:center;font-size:14px;font-weight:400;color:#333333">-->
                      <!--<span style="color:#E7EDF1">>———— </span><span style="cursor:pointer;margin-right:8px;" @click="active = 1">立即登录</span>  <span style="color:#E7EDF1">>———— </span>-->
                    <!--</p>-->
                  <!--</el-col>-->
                </el-row>
              </el-col>

            </el-form>
          </el-row>
          <div style="position:absolute; right:25px; top:16px;font-size:14px;">
            <span>已有账号？</span> <a href="javascript:;" @click="goLogin" style="color:#FF8800"> 立即登录</a>
          </div>
        </Portlet>

      </div>
    </div>
    <div class="footerBox">
      <div class="foot-text"><span>———— 四川居家智享信息技术有限公司 ————</span></div>
    </div>
  </div>
</template>
<script>
import {alert, dotData, copy} from '@/utils'
import {isPhone, isSame, isChinese, isEnglishOrNumber, isInteger} from '@/utils/validate'
export default {
  data() {
    return {
      loginHeight: '',
      activeRegStep: 1,
      codeLoading: false,
      verificationCodeText3: '获取验证码',
      times3: 0, // 注册
      config: {
        times3: 60 // 注册
      },
      loadingRegister: false,
      registerForm: {
        registerPhone: '',
        registerCode: '',
        pwd: '',
        registerPwdTwo: '',
        companyName: '',
        communityCode: '',
        legalPerson: '',
        serviceHotline: '',
        DAddress: [],
        detailAddress: '',
        contactsName: '',
        contactsPhone: '',
        businessLicense: [],
        carriageTestify: [],
        isAgree: false // 默认没有同意协议
      }
    }
  },
  mounted() {
    this.loginHeight = document.documentElement.clientHeight + 'px'
    // document.getElementById('getCursor').focus() // 默认光标的位置
  },
  computed: {
    registerBtnText() {
      if (this.activeRegStep === 1) {
        return '下一步'
      } else if (this.activeRegStep === 2) {
        return '立即注册'
      } else if (this.activeRegStep === 3 || this.activeRegStep === 4) {
        return '立即登录'
      }
      return ''
    }
  },
  methods: {
    isPhone,
    isSame,
    isChinese,
    isEnglishOrNumber,
    isInteger,
    // 检验验证码：
    checkRegisterCode() {
      this.loadingRegister = true
      let checkData = {}
      checkData.actionId = 'register'
      checkData.phone = this.registerForm.registerPhone
      checkData.code = this.registerForm.registerCode
      this.$ajax.get('/ms-common-user/user/check-verification-code', checkData).then(response => {
        const success = dotData(response, 'success')
        if (success) {
          this.activeRegStep = 2
          // 保存返回来的二次验证码key,最后提交时 使用
          this.backRegisterCode = dotData(response, 'data.key')
          console.log('验证码正确后返回来的二次验证码', this.backRegisterCode)
        }
      }).finally(_ => {
        this.loadingRegister = false
      })
    },
    // 倒计时
    timeReduce3() {
      if (this.times3 > 0) {
        this.verificationCodeText3 = this.times3 + 's后重新获取'
        setTimeout(this.timeReduce3, 1000)
        this.times3 -= 1
      } else {
        this.verificationCodeText3 = '获取验证码'
      }
    },
    // xin注册：发送验证码+倒计时
    getRegisterCode() {
      if (this.registerForm.registerPhone) {
        let data = {
          phone: this.registerForm.registerPhone,
          actionId: 'register'
        }
        this.codeLoading = true
        this.$ajax.get('/ms-common-user/user/sendSms', data).then(response => {
          // const status = dotData(response, 'data.status')
          if (response.success) {
            this.codeLoading = false
            this.times3 = this.config.times3
            this.timeReduce3()
          } else { // if (status === 'error')
            this.$confirm('您已注册过居家智享SaaS云物流，请直接登录', '温馨提示', {
              confirmButtonText: '确定',
              showCancelButton: false,
              dangerouslyUseHTMLString: true,
              confirmButtonClass: 'loginTipsbutton',
              center: true
            }).then(_ => {
              this.goLogin()
            })
          }
        }).finally(_ => {
          this.codeLoading = false
        })
      } else {
        alert('请输入手机号')
      }
    },
    // 管理注册的 按钮
    registerSubmit() {
      this.$refs.registerForm.validate(result => {
        if (!result) {
          return
        }
        if (this.activeRegStep === 1) { // 第一步的按钮：检查验证码正确否
          this.checkRegisterCode()
        } else if (this.activeRegStep === 2) { // 第二步的按钮：提交资质认证
          this.submitCompany()
        } else if (this.activeRegStep === 3) { // 最后一步的按钮：返回
          this.goLogin()
        }
      })
    },
    // 提交：公司资质认证
    submitCompany() {
      // if (!this.backRegisterCode) { // 如果用户绕过第一步，直接就来到了第二步
      //   this.$confirm('请先前往第一步填写注册信息', '提示', {
      //     type: 'success',
      //     center: true,
      //     confirmButtonText: '确定',
      //     showCancelButton: false,
      //     closeOnclickModal: false
      //   }).then(_ => {
      //     this.activeRegStep = 1
      //   })
      // }
      if (!this.registerForm.isAgree) {
        alert('注：同意《用户服务协议》后方可注册')
        return
      }
      this.loadingRegister = true
      let data = copy(this.registerForm, true)
      // data.backRegisterCode = this.backRegisterCode || ''
      data.businessLicense = data.businessLicense.join('')
      data.carriageTestify = data.carriageTestify.join('')
      if (data.DAddress.length) {
        data.provinceNo = dotData(data.DAddress, '[0]') || ''
        data.cityNo = dotData(data.DAddress, '[1]') || ''
        data.districtNo = dotData(data.DAddress, '[2]') || ''
      }
      delete data.DAddress
      delete data.registerCode
      delete data.registerPwdTwo
      this.$ajax.post('/ms-warehouse-order/user/register-trunk', data).then(response => {
        const success = dotData(response, 'success')
        if (success) {
          this.loadingRegister = false
          this.activeRegStep = 3
        } else {
          this.activeRegStep = 4
        }
      }).finally(_ => {
        this.loadingRegister = false
      })
    },
    goLogin() {
      this.$router.push({path: '/login'})
    }
  }
}
</script>
